<template>
  <!-- contentType可设置html|text -->
  <div class="w-full h-[100%]">
    <quill-editor
      class="bg-white text-[14px] w-full h-full"
      :options="editorOptions"
      style="border: none; font-style: normal"
      contentType="html"
      ref="qeditor"
      @textChange="textChange"
    ></quill-editor>
  </div>
</template>
<script setup lang="ts">
  import { QuillEditor } from '@vueup/vue-quill'
  import '@vueup/vue-quill/dist/vue-quill.snow.css'
  // import { Emoji } from 'quill-emoji'
  import 'quill/dist/quill.core.css'
  import { onMounted, ref } from 'vue'
  defineProps({
    modelValue: {
      type: Object,
      default() {
        return {
          html: '',
          content: '',
        }
      },
    },
  })
  const emit = defineEmits(['update:modelValue'])
  const qeditor = ref()

  const textChange = () => {
    const content = qeditor.value.getText().trim() // 获取 Quill 实例的内容
    const editHTML = qeditor.value?.getHTML() // 获取 Quill 实例的 HTML 内容
    emit('update:modelValue', { html: editHTML, content }) // 发出事件更新父组件
  }

  const editorOptions = {
    theme: 'snow',
    modules: {
      toolbar: false,
    },
    // toolbar: [
    //   [{ header: [1, 2, false] }],
    //   ['bold', 'italic', 'underline'],
    //   ['image', 'code-block'],
    //   ['emoji'], // 添加表情符号按钮到工具栏
    // ],
    // emoji: {
    //   icons: 'google', // 使用 Google 表情符号
    //   moreIcons: 'google', // 更多表情符号也使用 Google 风格
    // },
    placeholder: '请输入需要咨询问题',
  }
  onMounted(() => {
    console.log('qeditor.value', qeditor.value)
    // const quill = qeditor.value?.getQuill()
    // quill.register('module/emoji', Emoji)
  })
</script>

<style lang="less" scoped>
  .ql-container.ql-snow {
    border: none !important;
  }
  .ql-editor {
    padding: 0 16px !important;
  }
</style>
